<template>
	<div class="orderList zy-content">
		<!--        <div class="tabWrap">-->
		<Tabs class="tabs-layout mb16" v-model="lineType">
			<TabPane v-for="(item, index) in lineList" :key="index" :label="item.name" :name="item.id"></TabPane>
		</Tabs>
		<div class="loading-bg" v-if="loading" @click="loadingWarning"></div>
		<Tabs class="tabs-layout mb16" :value="searchParams.status" @on-click="onTabs" :key="tabsKey">
			<TabPane :label="label1" name="0"></TabPane>
			<TabPane :label="label2" name="1"></TabPane>
			<TabPane :label="label3" name="8"></TabPane>
			<!-- <TabPane :label="label4" name="2"></TabPane> -->
			<!-- <TabPane :label="label5" name="3"></TabPane> -->
			<!-- <TabPane :label="label6" name="4"></TabPane> -->
			<TabPane :label="label7" name="5"></TabPane>
			<TabPane :label="label8" name="6"></TabPane>
			<!-- <TabPane :label="label10" name="9"></TabPane> -->
			<!-- <TabPane :label="label12" name="12"></TabPane> -->
			<TabPane :label="label9" name="7"></TabPane>
			<TabPane :label="label11" name="-1"></TabPane>
		</Tabs>
		<div class="searchBox search-box-layout">
			<Row :gutter="24">
				
				<Col span="4">
					<div>
						<p class="label">{{ $t('common.UseLocation') }}</p>
						<div class="ipt">
							<Cascader clearable :data="orgList" v-model="searchParams.orgCode" :placeholder="`${$t('common.selectInfo')}`" change-on-select>
							</Cascader>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('设备等级') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.deviceGrade" clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="(item, index) of deviceList" :value="item" :key="index" :label="item"></Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('maintenance.EquipmentNo') }}</p>
						<div class="ipt">
							<Input type="text" v-model="searchParams.deviceNo" :placeholder="`${$t('common.inputInfo')}`"></Input>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label hide-label">--</p>
						<div class="ipt">
							<Button class="search-btn" type="primary" @click="search">{{ $t('common.Query') }}</Button>
							<Button class="reset-btn" @click="reset">{{ $t('common.reset') }} </Button>
						</div>
					</div>
				</Col>
				<Col span="4">
					<!-- <div>
						<p class="label">{{ $t('common.company') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.companyId" clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="(item, index) of companyList" :value="item.id" :key="index" :label="item.name"></Option>
							</Select>
						</div>
					</div> -->
				</Col>
				<Col span="4">
					<div class="t-r">
						<p class="label hide-label">--</p>
						<div class="ipt">
							<Button class="reset-btn" style="max-width: 300px; width: auto" @click="addOrderClick">{{ $t('fault.NewWorkOrder') }}</Button>
						</div>
					</div>
				</Col>
			</Row>
		</div>
		<div class="wrap">
			<div class="item" v-for="order in list" :key="order.id">
				<orderStatusIcon :status="order.workOrderStatus" />
				<div class="name">
					<span>{{ order.deviceNo }}</span>
					<div class="name-img" v-if="order.maintainMode === 2">
						<img src="@/assets/images/workorder/deal.png" />
					</div>
					<p>
						{{
							order.workOrderStatus == 0 || order.workOrderStatus == -1 || order.workOrderStatus == 1
								? order.maintainApplyByStr
								: order.receiveOrderByStr
						}}
						{{ order.workOrderStatus == 0 || order.workOrderStatus == -1 || order.workOrderStatus == 1 ? '（报修人）' : '（主要维修）' }}
					</p>
				</div>
				<div style="height: 36px">
					<Tag color="blue" v-if="order.maintainGradeStr">{{ order.maintainGradeStr }}</Tag>
					<Tag color="blue" v-if="order.affectProductionFlagStr && order.affectProductionFlag === 0">{{ order.affectProductionFlagStr }}</Tag>
					<Tag color="volcano" v-if="order.affectProductionFlagStr && order.affectProductionFlag === 1">{{ order.affectProductionFlagStr }}</Tag>
					<Tag color="red" v-if="order.affectProductionFlagStr && order.affectProductionFlag === 2">{{ order.affectProductionFlagStr }}</Tag>
					<Tag color="blue" v-if="order.workOrderGradeStr">{{ order.workOrderGradeStr }}</Tag>
				</div>
				<div class="details">
					<div class="formItem">
						<!--维修单号：-->
						<div class="label">{{ $t('fault.RepairFormNumber') }}：</div>
						<div class="value num" @click="handleWorkNumDetail(order)">{{ order.workOrderNo }}</div>
					</div>
					<div class="formItem">
						<!--报修时间：-->
						<div class="label">{{ $t('fault.RenovationTime') }}：</div>
						<div class="value">{{ order.maintainApplyTime }}</div>
					</div>
					<div class="formItem" v-if="order.faultPart">
						<!--故障部位：-->
						<div class="label">{{ $t('fault.faultLocation') }}：</div>
						<div class="value">{{ order.faultPart }}</div>
					</div>
					<div class="formItem" v-if="order.faultCategory">
						<!--故障分类：-->
						<div class="label">{{ $t('fault.FaultClassification') }}：</div>
						<div class="value">{{ order.faultCategory }}</div>
					</div>
					<div class="formItem">
						<!--功能位置：-->
						<div class="label">{{ $t('fault.FunctionalLocation') }}：</div>
						<div class="value">{{ order.functionalLocationName }}</div>
					</div>
					<div class="formItem">
						<!--故障现象：-->
						<div class="label">{{ $t('fault.Description') }}：</div>
						<div class="value over-wrapper">{{ order.faultMessage }}</div>
					</div>
					<div class="formItem">
						<!--故障详情：-->
						<div class="label">故障详情：</div>
						<div class="value over-wrapper">{{ order.faultDetail }}</div>
					</div>
						<!--备件采购状态：-->

					<!-- <div class="formItem" v-if="order.backupStatus">
						<div class="label">{{ $t('备件采购状态') }}：</div>
						<div
							class="value over-wrapper backupStatus"
							:class="{ backupStatus1: order.backupStatus == 1, backupStatus2: order.backupStatus == 2, backupStatus3: order.backupStatus == 3 }"
						>
							<span></span>{{ backupStatusList[order.backupStatus] }}
						</div>
					</div> -->
					<div class="preview" v-if="order.attachmentDTOs1 && order.attachmentDTOs1.length">
						<Badge :count="order.attachmentDTOs1 ? order.attachmentDTOs1.length : 0">
							<div class="preview-img">
								<div
									v-for="(item, index) in order.attachmentDTOs1"
									:key="index"
									class="itemCol"
									@click="previewClicjk(item, index, order.attachmentDTOs1)"
								>
									<span class="item">
										<template v-if="!item.filePath.includes('video')">
											<img :src="util.filePathToUrl(item.filePath)" alt="" />
										</template>
										<template>
											<video preload="auto" loop autoplay muted>
												<source :src="util.filePathToUrl(item.filePath)" type="video/mp4" />
											</video>
										</template>
									</span>
								</div>
							</div>
						</Badge>
					</div>
					<div class="btnF">
						<!-- 维修确认 -->
						<template v-if="order.workOrderStatus == 0">
							<Button type="error" ghost v-has="'deviceServiceDel'" @click="handleDeleteModal(order)">删除</Button>
							<!--驳回-->
							<Button type="default" class="black" ghost v-has="'deviceServiceRej'" @click="handleOut(order.id)" :loading="outLoading">驳回</Button>
							<!--编辑-->
							<Button type="default" class="black" ghost v-has="'deviceServiceEdit'" @click="handleEdit(order)" :loading="outLoading">编辑</Button>
							<!--维修申请确认-->
							<Button class="blue" type="primary" ghost v-has="'deviceServiceNext'" @click="handleRepair(order.id)">确认</Button>
						</template>

						<!-- 待分配-->
						<template v-if="order.workOrderStatus == 1">
							<Button type="error" ghost v-has="'deviceServiceDel'" @click="handleDeleteModal(order)">删除</Button>
							<Button type="default" class="black" ghost v-has="'deviceServiceRej1'" @click="handleCommonReject(order.id, 1)" :loading="outLoading">
								驳回
							</Button>
							<Button v-has="'deivceServiceTrans'" class="black" @click="brforeDispath(order)">{{
								order.receiveOrderByStr ? '转单' : '分配'
							}}</Button>
							<Button v-has="'deviceServiceAccept1'" class="blue" type="primary" @click="beforeRevice(order)">接单</Button>
						</template>
						<!-- 升级中-->
						<template v-if="order.workOrderStatus == 8">
							<Button v-has="'deivceServiceTrans'" class="black" @click="brforeDispath(order)">{{
								order.receiveOrderByStr ? '转单' : '分配'
							}}</Button>
							
							<Button v-has="'deviceServiceAccept1'" class="blue" type="primary" @click="beforeRevice(order)">接单</Button>
							<!-- <Button type="primary" v-if="order.receiveOrderByStr" class="blue" @click="handleConfirmOrder(order)">维修完成</Button>
							<Button v-else class="blue"  type="primary" @click="beforeRevice(order)">{{ $t('fault.Receiving') }}</Button> -->
						</template>

						<!-- 维修中-->
						<template v-if="order.workOrderStatus == 5">
							<Button v-has="'deivceServiceTrans'" class="black" @click="brforeDispath(order)">{{
								order.receiveOrderByStr ? '转单' : '分配'
							}}</Button>
							<Button v-has="'deviceServiceComplete'" type="primary" class="blue" @click="handleConfirmOrder(order)">维修完成</Button>
							<Button
								type="default"
								class="black"
								ghost
								v-has="'deviceServiceRej2'"
								@click="handleCommonReject(order.id, 5)"
								:loading="outLoading"
							>
								驳回
							</Button>
						</template>

						<!-- 待验收-->
						<template v-if="order.workOrderStatus == 6">
							<Button v-has="'deviceServiceRej2'" type="default" class="black" ghost @click="handleCommonReject(order.id, 6)" :loading="outLoading">
								{{ $t('fault.Reject') }}
							</Button>
							<Button v-has="'deviceServiceAccept'" type="primary" class="blue" @click="handleConfirmOrder(order)">{{ $t('fault.acceptance') }}</Button>
						</template>

						<!-- 已驳回-->
						<template v-if="order.workOrderStatus == -1">
							<Button v-has="'deviceServiceDel'" type="error" ghost @click="handleDeleteModal(order)">{{ $t('common.Delete') }}</Button>
						</template>

						<!-- 无用 -->
						<!--委外确认-驳回-->
						<template v-if="order.workOrderStatus == 3">
							<Button type="default" class="black" ghost @click="handleOutsourcingReject(order.id)" :loading="outLoading">{{
								$t('fault.Reject')
							}}</Button>
						</template>
						<!--确认-->
						<template v-if="order.workOrderStatus == '2' || order.workOrderStatus == '3'">
							<Button type="primary" class="blue" @click="handleConfirmOrder(order)">{{ $t('maintenance.Confirmed') }}</Button>
						</template>
						<!--修-->
						<template v-if="order.workOrderStatus == '4'">
							<Button type="primary" class="blue" @click="handleConfirmOrder(order)">{{ $t('fault.build') }}</Button>
						</template>

						<!--复核-->
						<template v-if="order.workOrderStatus == '9'">
							<Button type="primary" class="blue" @click="handleConfirmOrder(order)">{{ $t('复核') }}</Button>
						</template>
						<!-- 待维修驳回 -->
						<template v-if="order.workOrderStatus == 4">
							<Button type="default" class="black" ghost @click="handleRepairOutsourcingReject(order.id, 4)" :loading="outLoading">
								{{ $t('fault.Reject') }}
							</Button>
						</template>
			
						<!--复盘-->
						<template v-if="order.workOrderStatus == 12">
							<Button type="default" class="black" ghost v-has="'workReplay'" @click="handleConfirmOrder(order)" :loading="outLoading">
								{{ $t('复盘') }}
							</Button>
						</template>
					</div>
				</div>
			</div>
		</div>
		<div class="pageWrap mt16" v-if="total > 0">
			<Page
				:total="total"
				:page-size="pageSize"
				:page-size-opts="$variable.pageSizes"
				:current="pageNum"
				@on-change="changePageNum"
				@on-page-size-change="changePageSize"
				show-sizer
				show-total
			/>
		</div>
		<!--选择单个人员-->
		<signle-member-modal ref="signleMemberModal" @handleRefresh="handleRefresh" />

		<!--确认提醒-->
		<!--        <order-detail-modal ref="orderDetailModal" @handleRefresh="handleRefresh"/>-->
		<AddModal ref="addModal" @refresh="handleRefresh" @handleRecive="handleRecive" @handleDispath="handleDispath" />
		<Modal :mask-closable="false" class="modal-title-layout" v-model="confirmFaultCodeShowF" :title="`${$t('fault.Confirmremind')}`">
			<div class="icon blue">
				<i class="iconfont zy-common-chenggong1"></i>
			</div>
			<p class="title">
				<span>{{ $t('common.workorderenters') }}</span>
			</p>
			<div slot="footer">
				<Button type="default" @click="confirmFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="repairLoading" @click="handleConfirmOk(1)">{{ $t('maintenance.Confirmed') }} </Button>
			</div>
		</Modal>
		<!--驳回提醒-->
		<Modal :mask-closable="false" v-model="backFaultCodeShowF" class="modal-title-layout" :title="`${$t('fault.ConfiRejected')}`">
			<div class="icon red">
				<i class="iconfont zy-common-shibai1"></i>
			</div>
			<p class="title">
				<span>{{ $t('common.Pleasereject') }}</span>
			</p>
			<div slot="footer">
				<Button type="default" @click="backFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="backLoading" @click="handleConfirmOk(-1)">{{ $t('maintenance.Confirmed') }} </Button>
			</div>
		</Modal>
		<Modal :mask-closable="false" class="modal-title-layout" v-model="deleteShow" :title="`${$t('common.Delete')}`">
			<div class="icon red">
				<i class="iconfont zy-common-shanchu"></i>
			</div>
			<p class="title">
				<span>{{ $t('common.confirmDelete') }}</span>
			</p>
			<div slot="footer">
				<Button type="default" @click="deleteShow = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="repairLoading" @click="handleDelete">{{ $t('maintenance.Confirmed') }} </Button>
			</div>
		</Modal>
		<gallery :images="galleryImagesList" :index="galleryIndexInfo" @close="galleryIndexInfo = null"></gallery>
		<inputModal ref="inputModal"></inputModal>
		<commonModal ref="commonModal"></commonModal>
	</div>
</template>

<script>
// import orderDetailModal from './modules/orderDetailModal'
import recursion from '../../../util/recursion';
import SignleMemberModal from './modules/signleMemberModal';
import AddModal from './modules/addModal';
import VueGallery from 'vue-gallery';
import orderStatusIcon from './modules/orderStatusIcon';
import inputModal from '@/components/modalTypes/inputModal.vue';
import commonModal from '@/components/modalTypes/commonModal.vue';
export default {
	name: 'orderList',
	components: {
		AddModal,
		SignleMemberModal,
		// orderDetailModal,
		gallery: VueGallery,
		orderStatusIcon,
		inputModal,
		commonModal,
	},
	data() {
		return {
			backupStatusList: { 1: this.$t('待采购'), 2: this.$t('采购中'), 3: this.$t('已到货') },
			deleteShow: false,
			loading: false,
			galleryIndexInfo: null,
			galleryImagesList: [],
			detailId: '',
			repairId: '',
			total: 0,
			pageNum: 1,
			pageSize: 10,
			labelCount1: 0,
			labelCount2: 0,
			labelCount3: 0,
			labelCount4: 0,
			labelCount5: 0,
			labelCount6: 0,
			labelCount7: 0,
			labelCount8: 0,
			labelCount9: 0,
			labelCount10: 0,
			labelCount11: 0,
			labelCount12: 0,
			label1: (h) => {
				return h('div', [
					// h('span', '维修申请'),
					h('span', `${this.$t('fault.MaintenanceApplication')}`),
					h('Badge', {
						props: {
							count: this.labelCount1,
						},
					}),
				]);
			},
			label2: (h) => {
				return h('div', [
					//h('span', '工单大厅'),
					h('span', `${this.$t('fault.OrderDisplay')}`),
					h('Badge', {
						props: {
							count: this.labelCount2,
						},
					}),
				]);
			},
			label3: (h) => {
				return h('div', [
					// h('span', '升级中'),
					h('span', `${this.$t('fault.Upgrading')}`),
					h('Badge', {
						props: {
							count: this.labelCount3,
						},
					}),
				]);
			},
			label4: (h) => {
				return h('div', [
					// h('span', '故障确认'),
					h('span', `${this.$t('fault.FaultConfirm')}`),
					h('Badge', {
						props: {
							count: this.labelCount4,
						},
					}),
				]);
			},
			label5: (h) => {
				return h('div', [
					// h('span', '委外确认'),
					h('span', `${this.$t('fault.OutsourcingComfirming')}`),
					h('Badge', {
						props: {
							count: this.labelCount5,
						},
					}),
				]);
			},
			label6: (h) => {
				return h('div', [
					//h('span', '待维修'),
					h('span', `${this.$t('fault.ToBeRepaired')}`),
					h('Badge', {
						props: {
							count: this.labelCount6,
						},
					}),
				]);
			},
			label7: (h) => {
				return h('div', [
					//h('span', '维修中'),
					h('span', `${this.$t('fault.Repairing')}`),
					h('Badge', {
						props: {
							count: this.labelCount7,
						},
					}),
				]);
			},
			label8: (h) => {
				return h('div', [
					//h('span', '已完工'),
					h('span', `${this.$t('fault.ToBeAccepted')}`),
					h('Badge', {
						props: {
							count: this.labelCount8,
						},
					}),
				]);
			},
			label10: (h) => {
				return h('div', [
					//h('span', '已验收'),
					h('span', `${this.$t('待复核')}`),
					h('Badge', {
						props: {
							count: this.labelCount10,
						},
					}),
				]);
			},
			label12: (h) => {
				return h('div', [
					h('span', `${this.$t('待复盘')}`),
					h('Badge', {
						props: {
							count: this.labelCount12,
						},
					}),
				]);
			},
			label9: (h) => {
				return h('div', [
					//h('span', '已验收'),
					h('span', `${this.$t('已结单')}`),
					h('Badge', {
						props: {
							count: this.labelCount9,
						},
					}),
				]);
			},
			label11: (h) => {
				return h('div', [
					//h('span', '已验收'),
					h('span', `${this.$t('已驳回')}`),
					h('Badge', {
						props: {
							count: this.labelCount11,
						},
					}),
				]);
			},
			confirmFaultCodeShowF: false,
			repairLoading: false,
			outLoading: false,
			backFaultCodeShowF: false,
			backLoading: false,
			searchParams: {
				status: '0',
			},
			checkBtnPermission: {},
			orgList: [],
			deviceList: ['A', 'B', 'C'],
			list: [],
			companyList: [], // 所属公司data
			tabsKey: 0,
			tabKey: [0, 1, 8, 5, 6, 7, -1],
			isOutReject: false,
			lineList: [],
			isRepairReject: false,
			lineType: 999,
		};
	},
	created() {
		let status = sessionStorage.getItem('workOrderHallStatus');
		// this.onTabs(status)

		console.log(status, 'stausea');
		if (status) {
			// this.onTabs(status)
			this.searchParams.status = status - 0;
			sessionStorage.removeItem('workOrderHallStatus');
			// this.$
		} else {
			status = 0;
		}
		// this.tabsKey++

		this.$nextTick(() => {
			document.getElementsByClassName('ivu-tabs-tab')[this.tabKey.indexOf(status / 1)].click();
		});

		this.getCountsList();
		this.getFactory();
		this.getCompanyList();
		this.getOrgList();
		// this.getList()
	},
	watch: {
		lineType: function (val) {
			const _list = this.lineList.filter((item) => item.id == val || val == 999);
			this.searchParams.orgCode = val == 999 ? [] : [_list[0].id];
			this.orgList = _list;
			this.search();
		},
	},
	mounted() {},
	methods: {
		handleCommonReject(id, status) {
			this.$refs.inputModal.showModal({
				title: '驳回',
				submit: (form) => {
					this.axios({
						method: 'post',
						url: '/dms/deviceMaintenanceWorkOrder/reject',
						data: { id, remark: form.value },
					}).then((res) => {
						if (res.code === 200) {
							this.$Message.success(res.msg);
							this.search();
						} else {
							this.$Message.warning({ content: res.msg, duration: 6, closable: true });
						}
					});
				},
			});
		},
		getFactory() {
			this.axios({
				method: 'get',
				url: '/basic/organization/findListByToken',
				params: { level: 1 },
			}).then((res) => {
				if (res.code === 200) {
					const obj = { label: 'name', value: 'id', children: 'children' };
					let list = recursion.convertTree(res.data, obj);

					list.unshift({
						name: this.$t('全部'),
						id: 999,
						children: [],
					});
					this.lineList = list;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		previewClicjk(item, index, arr) {
			this.galleryIndexInfo = index;
			// let arr = this.order.attachmentDTOs1
			this.galleryImagesList = arr.map((val) => {
				if (val.filePath.includes('video')) {
					val.filetype = 'video/mp4';
				}
				if (val.filePath.includes('jpg')) {
					val.filetype = 'image/jpeg';
				}
				return {
					type: val.filetype,
					href: this.util.filePathToUrl(val.filePath),
				};
			});
		},
		/**************基础数据**********************/
		getOrgList() {
			this.axios({
				method: 'get',
				url: '/basic/organization/findListByToken',
				params: { level: 3 },
			}).then((res) => {
				if (res.code === 200) {
					const obj = {
						label: 'name',
						value: 'id',
						children: 'children',
					};
					this.orgList = recursion.convertTree(res.data, obj);
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		getCompanyList() {
			this.axios({
				method: 'get',
				url: '/basic/company/getCompanyListByUser',
				params: {},
			}).then((res) => {
				if (res.code === 200) {
					this.companyList = res.data;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		getCountsList() {
			let params = {};
			if (this.lineType != 999) params.orgId = this.lineType;
			this.axios({
				method: 'get',
				url: '/dms/deviceMaintenanceWorkOrder/orderStatusCount',
				params: { ...params },
			}).then((res) => {
				if (res.code === 200) {
					let obj = res.data;
					this.labelCount1 = 0;
					this.labelCount2 = 0;
					this.labelCount3 = 0;
					this.labelCount4 = 0;
					this.labelCount5 = 0;
					this.labelCount6 = 0;
					this.labelCount7 = 0;
					this.labelCount8 = 0;
					this.labelCount9 = 0;
					this.labelCount10 = 0;
					this.labelCount11 = 0;
					this.labelCount12 = 0;
					if (Reflect.has(obj, 0)) {
						this.labelCount1 = obj[0];
					}
					if (Reflect.has(obj, 1)) {
						this.labelCount2 = obj[1];
					}
					if (Reflect.has(obj, 8)) {
						this.labelCount3 = obj[8];
					}
					if (Reflect.has(obj, 2)) {
						this.labelCount4 = obj[2];
					}
					if (Reflect.has(obj, 3)) {
						this.labelCount5 = obj[3];
					}
					if (Reflect.has(obj, 4)) {
						this.labelCount6 = obj[4];
					}
					if (Reflect.has(obj, 5)) {
						this.labelCount7 = obj[5];
					}
					if (Reflect.has(obj, 6)) {
						this.labelCount8 = obj[6];
					}
					if (Reflect.has(obj, 7)) {
						this.labelCount9 = obj[7];
					}
					if (Reflect.has(obj, 9)) {
						this.labelCount10 = obj[9] || 0;
					}
					if (Reflect.has(obj, -1)) {
						this.labelCount11 = obj[-1];
					}
					if (Reflect.has(obj, 12)) {
						this.labelCount12 = obj[12];
					}
					this.$forceUpdate();
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		//新增工单
		addOrderClick() {
			this.$refs.addModal.show();
		},
		//刷新
		handleRefresh() {
			this.getList();
			this.getCountsList();
		},
		// '转单' : '分配'
		brforeDispath(order) {
			if (order.workOrderStatus === 5) {
				this.handleDispath(order, "TransFor");
			} else {
				this.handleDispath(order,'Dispath');
			}
		},
		//分配
		handleDispath(order, type) {
			this.$refs.signleMemberModal.show(order, type);
		},
		//详情
		handleWorkNumDetail(order) {
			// this.$refs.orderDetailModal.show(order.id, this.searchParams.status)
			this.$router.push({
				path: '/fault/statement/workOrderDetail',
				query: {
					id: order.id,
					status: this.searchParams.status,
				},
			});
		},
		// 转单
		async beforeRevice(order, target) {
			// if (order.workOrderSource === 1) {
			// 	const _checkDeviceStatus = await this.checkDeviceStatus(order.deviceMId)
			// 	if (_checkDeviceStatus){
			// 	  this.$refs.commonModal.showModal({
			// 	    type: "warn",
			// 	    desc: this.$t('已存在未完工的维修单，是否确认继续接单？'),
			// 	    submit: () => {
			// 	      this.$refs.addModal.open(order, target || 'receive', this.$t('填写设备'));
			// 	    }
			// 	  })
			// 	}else{
			// 	this.$refs.addModal.open(order, target || 'receive', this.$t('填写设备'));
			// 	}
			// } else {
				
			// }
			this.handleRecive(order);

		},
		checkDeviceStatus(deviceMId) {
			return new Promise((resolve) => {
				this.axios({
					method: 'get',
					url: '/dms/workOrder/checkDeviceInRepair',
					params: {
						deviceMId,
					},
				}).then((res) => {
					if (res.code === 200) {
						resolve(res.data);
					}
				});
			});
		},
		//接
		handleRecive(order, deviceMId) {
			let params = {
				workOrderId: order.id,
				userId: window.localStorage.getItem('ziyunFactoryUserId'),
				workOrderStatus: order.workOrderStatus,
				platform: 1,
			};

			if (deviceMId) {
				params['deviceMId'] = deviceMId;
			}

			this.axios({
				method: 'get',
				url: '/dms/deviceMaintenanceWorkOrder/receiveOrDistribution',
				params: params,
			})
				.then((res) => {
					if (res.code === 200) {
						this.$Message.success({ content: `${this.$t('common.OrderSuce')}`, duration: 6, closable: true });
						this.$router.push({
							path: '/fault/statement/workOrderDetail',
							query: {
								id: order.id,
								status: 2,
							},
						});
					} else {
						this.$Message.warning({ content: res.msg, duration: 6, closable: true });
					}
				})
				.finally(() => {
					// this.$refs.orderDetailModal.show(order.id, '2')
					// const userId = localStorage.getItem('ziyunFactoryUserId')
				});
		},
		// 确认查看详情
		handleConfirmOrder(order) {
			// this.$refs.orderDetailModal.show(order.id, this.searchParams.status)
			// const userId = localStorage.getItem('ziyunFactoryUserId')
			this.$router.push({
				path: '/fault/statement/workOrderDetail',
				query: {
					id: order.id,
					status: this.searchParams.status,
				},
			});
		},
		// 确定工单进入工单大厅
		handleConfirmOk(type) {
			this.repairLoading = true;
			let ajaxParams = {};
			if (this.isOutReject) {
				ajaxParams = {
					url: '/dms/workOrder/outsourcingToConfirm',
					data: { dmsMaintainId: this.repairId, reject: true },
					method: 'post',
				};
			} else if (this.isRepairReject) {
				ajaxParams = {
					url: '/dms/workOrder/rollbackToFaultVerification',
					params: { workOrderId: this.repairId },
					method: 'get',
				};
			} else {
				ajaxParams = {
					url: '/dms/workOrder/passOrRefuse',
					params: { id: this.repairId, type: type },
					method: 'get',
				};
			}
			this.axios({
				...ajaxParams,
			})
				.then((res) => {
					if (res.code === 200) {
						this.$Message.success({ content: `${type === 1 ? '维修确认' : '驳回'}成功！`, duration: 6, closable: true });
						this.getList();
						this.getCountsList();
					} else {
						this.$Message.warning({ content: res.msg, duration: 6, closable: true });
					}
				})
				.finally(() => {
					this.repairLoading = false;
					this.confirmFaultCodeShowF = false;
					this.backFaultCodeShowF = false;
					this.isRepairReject = false;
				});
		},
		//删除
		handleDeleteModal(item) {
			this.deleteShow = true;
			this.detailId = item.id;
		},
		handleDelete() {
			this.axios({
				method: 'get',
				url: '/dms/deviceMaintenanceWorkOrder/delete',
				params: {
					id: this.detailId,
				},
			})
				.then((res) => {
					if (res.code === 200) {
						this.$Message.success({ content: '删除成功', duration: 6, closable: true });
						this.deleteShow = false;
						this.detailId = '';
						this.getList();
						this.getCountsList();
					} else {
						this.$Message.warning({ content: res.msg, duration: 6, closable: true });
					}
				})
				.finally(() => {
					this.repairLoading = false;
					this.confirmFaultCodeShowF = false;
					this.backFaultCodeShowF = false;
				});
		},
		//维修
		handleRepair(id) {
			this.confirmFaultCodeShowF = true;
			this.repairId = id;
		},
		//驳回
		handleOutsourcingReject(id) {
			this.isOutReject = true;
			this.backFaultCodeShowF = true;
			this.repairId = id;
		},
		handleRepairOutsourcingReject(id) {
			this.isRepairReject = true;
			this.backFaultCodeShowF = true;
			this.repairId = id;
		},
		handleEdit(order) {
			this.$refs.addModal.edit(order, 'edit', this.$t('编辑工单'));
		},
		//驳回
		handleOut(id) {
			this.isOutReject = false;
			this.backFaultCodeShowF = true;
			this.repairId = id;
		},
		changePageSize(val) {
			this.pageSize = val;
			this.getList();
		},
		changePageNum(val) {
			this.pageNum = val;
			this.getList();
		},
		reset() {
			let status = this.searchParams.status;
			this.searchParams = {
				status: status,
			};
			this.search();
		},
		search() {
			this.changePageNum(1);
			this.getCountsList();
		},
		getList() {
			let status = this.searchParams.status;
			let cacheStatus = this.searchParams.status;
			let params = {
				orderStatus: [+status],
				companyId: this.searchParams.companyId,
				orgId: this.searchParams.orgCode && this.searchParams.orgCode.at(-1),
				deviceNo: this.searchParams.deviceNo,
				deviceGrade: this.searchParams.deviceGrade,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				orderSingleStatus: status,
			};
			if (status === '0') {
				params.orderStatus = [0];
			}
			if (status === '8') {
				params.orderStatus = [0,1,5];
				params.workOrderGrade = 1;
			}
			if (status === '10') {
				params.orderStatus = [-1];
			}

			this.loading = true;

			this.axios({
				method: 'post',
				url: '/dms/deviceMaintenanceWorkOrder/list',
				data: params,
			})
				.then((res) => {
					if (res.code === 200) {
						if (cacheStatus === this.searchParams.status) {
							this.list = res.data.list;
							this.total = res.data.total;
						}
					} else {
						this.list = [];
						this.$Message.warning({ content: res.msg, duration: 6, closable: true });
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		tabsBeforeLeave(activeName, oldActiveName) {
			return !this.loading;
		},
		onTabs(val) {
			this.searchParams.status = val;
			this.pageNum = 1;
			this.getList(val);
			this.getCountsList();
			sessionStorage.setItem('workOrderHallStatus', val);
		},
		loadingWarning() {
			this.$Message.warning(this.$t('message.pleaseWait'));
		},
	},
};
</script>

<style lang="scss" scoped>
.orderList {
	//background: #fff;

	.tabWrap {
		display: flex;
		border-bottom: 1px solid #dcdee2;
		position: relative;
		.loading-bg {
			background: transparent;
			width: calc(100% - 223px);
			height: 100%;
			z-index: 11;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.formWrap {
		::v-deep .ivu-form-item {
			margin-bottom: 0;
		}
	}

	.wrap {
		display: flex;
		flex-wrap: wrap;

		.item {
			width: calc((100% - 50px) / 5);
			margin-top: 15px;
			border-radius: 8px;
			background-color: #fff;
			overflow: hidden;
			position: relative;
			padding: 0 8px;
			line-height: 24px;
			height: 400px;

			margin-right: 12px;
			&:nth-child(5n + 5) {
				margin-right: 0;
			}

			.topR {
				position: absolute;
				right: 10px;
				top: 10px;
				width: 60px;
				height: 50px;

				img {
					width: 100%;
					height: auto;
					overflow: hidden;
				}
			}

			.name {
				position: relative;
				height: 48px;
				line-height: 20px;
				margin-top: 10px;

				span {
					display: inline-block;
					/*height: 40px;*/
					/*line-height: 40px;*/
					padding: 0 3px;

					&:nth-child(1) {
						color: #333;
						font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
						font-weight: 400;
						font-style: normal;
						font-size: 16px;
						/*line-height: 40px;*/
					}

					&:nth-child(2) {
						color: #666;
						font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
						font-size: 12px;
						/*line-height: 40px;*/
					}
				}

				.name-img {
					width: 69px;
					height: 26px;
					display: inline-block;
					margin-left: 25px;

					img {
						width: 100%;
						height: 100%;
						overflow: hidden;
					}
				}
			}

			.details {
				height: 280px;
				// padding-left: 10px;
				background-color: #f8fcff;
				margin-top: 12px;
				position: relative;

				.formItem {
					display: flex;
					align-items: center;

					.label {
						width: 90px;
						font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
						font-weight: 400;
						font-style: normal;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						font-size: 12px;
						color: #888888;
						line-height: 30px;
					}

					.value {
						width: calc(100% - 120px);
						color: #333;
						padding: 0 3px;
						font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
						font-weight: 400;
						font-style: normal;
						font-size: 12px;
					}

					.num {
						color: #187bdb;
						text-decoration: underline;
						cursor: pointer;
					}
				}

				.img {
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: 36px;
				}

				.preview {
					position: absolute;
					right: 0;
					bottom: 50px;
					width: 40px;
					height: 40px;
					background: #eee;

					.preview-img {
						width: 40px;
						height: 40px;
						overflow: hidden;
					}
				}
			}

			.ivu-tag-blue {
				border-color: #f1f7fd;
				border-radius: 24px;
				font-weight: 400;
				font-style: normal;
				font-size: 12px;
				color: #187bde !important;
			}

			.ivu-tag-volcano {
				border-color: #f1f7fd;
				border-radius: 24px;
				font-weight: 400;
				font-style: normal;
				font-size: 12px;
				color: #187bde !important;
			}

			.ivu-tag-red {
				border-color: #f1f7fd;
				border-radius: 24px;
				color: #187bde !important;
			}

			/deep/ .ivu-tag-blue .ivu-tag-text {
				color: #187bde !important;
				padding: 3px 3px;
			}

			/deep/ .ivu-tag-red .ivu-tag-text {
				color: #e03e55 !important;
				padding: 3px 3px;
			}

			.btnF {
				line-height: 40px;
				position: absolute;
				bottom: 0;
				right: 10px;

				button {
					margin-left: 5px;
					padding: 0 10px;
				}
			}
		}
	}

	.title {
		display: flex;
		justify-content: space-between;
		font-size: 20px;
		padding: 10px;
		border-bottom: 1px solid #dddddd;

		.icon {
			display: flex;

			.creatBtnright {
				display: flex;
				align-items: center;
				font-size: 16px;

				i {
					font-size: 36px;
				}
			}
		}
	}
}

.over-wrapper {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

::v-deep .tab {
	background-color: #fff;
	height: 50px;
	padding: 10px 50px;
	flex: 1;

	.ivu-tabs-bar {
		padding-left: 30px;
		border-bottom: none;
	}

	.ivu-tabs-tab {
		height: 50px;
		line-height: 50px;
		padding: 0 16px;

		div {
			font-size: 16px;
		}
	}
}

.unreciver {
	position: relative;
	display: inline-block;
	width: 69px;
	height: 35px;
	margin-right: 10px;
	background: inherit;
	background-color: rgba(242, 242, 242, 1);
	border: none;
	border-radius: 5px;
	font-family: 'Arial Normal', 'Arial', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 13px;
	letter-spacing: normal;
	color: #333333;
	vertical-align: none;
	text-align: center;
	line-height: 35px;
	text-transform: none;

	img {
		position: absolute;
		width: 12px;
		height: 12px;
		top: 23px;
		right: 1px;
	}
}

.black {
	color: #000;
	border-color: #333;
}
.blue {
	background: transparent !important;
	color: #2d8cf0 !important;
}
.red {
	width: calc(100% - 120px);
	color: red;
	padding: 0 3px;
	font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	line-height: 30px;
}

.green {
	width: calc(100% - 120px);
	color: #31b404;
	padding: 0 3px;
	font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	line-height: 30px;
}

.yellow {
	width: calc(100% - 120px);
	color: #ffbf00;
	padding: 0 3px;
	font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	line-height: 30px;
}
.backupStatus {
	span {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		display: inline-block;
		margin-right: 5px;
		vertical-align: inherit;
	}
	&.backupStatus1 {
		color: red !important;
		span {
			background: red;
		}
	}
	&.backupStatus2 {
		color: #dfdf3b !important;
		span {
			background: #dfdf3b;
		}
	}
	&.backupStatus3 {
		color: green !important;
		span {
			background: green;
		}
	}
}
</style>
<style lang="scss">
@media (max-width: 1600px) and (min-width: 1301px) {
	.orderList .wrap .item {
		width: calc((100% - 48px) / 4) !important;
		margin-right: 16px !important;
		&:nth-child(4n + 4) {
			margin-right: 0 !important;
		}
	}
}
@media (max-width: 1300px) and (min-width: 1000px) {
	.orderList .wrap .item {
		width: calc((100% - 32px) / 3) !important;
		margin-right: 16px !important;
		&:nth-child(3n + 3) {
			margin-right: 0 !important;
		}
	}
}
</style>
